<template>
    <Layout class="layout-container">
        <Content>
            <Spin fix v-if="loading"></Spin>
            <Layout class="layout-container">
                <Content class="padding-all">
                    <Tree ref="tree" :data="data" show-checkbox></Tree>
                </Content>
                <div class="padding-all">
                    <span class="pull-right">
                        <Button @click="reset">{{$t('info.reset')}}</Button>
                        <Button type="primary" html-type="submit" @click.prevent="submit">{{$t('info.submit')}}</Button>
                    </span>
                </div>
            </Layout>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin, Tree, Button } from 'view-design';
import { each, msuccess, merror } from 'config/utils';

//权限树
const URI_TREE = "/security/api/role/tree";
//分配权限
const URI_PERM = "/security/api/role/perm";

export default {
    name: "SysRolePerm",
    props: {
        params: Object
    },
    data() {
        return {
            loading: true,
            selections: [],
            permstree: [],
            perms: [],
            data: [{
                title: this.$t('sys.role.perm.root'),
                expand: true,
                children: []
            }]
        };
    },
    methods: {
        submit() {
            this.loading = true;
            var permIds = [];
            each(this.$refs.tree.getCheckedAndIndeterminateNodes(), function() {
                if (this.id) {
                    permIds.push(this.id);
                }
            });
            this.$http.post(URI_PERM, {
                id: this.params.id,
                permIds: permIds
            }).then((response) => {
                var res = response.data;
                if (res.success) {
                    msuccess(this.$t("info.success"));
                    this.$emit("close");
                } else {
                    merror(this.$t("info.error"));
                }
                this.loading = false;
            });
        },
        reset() {
            this.data[0].checked = false;
            this.resetChecked(this.data[0].children);
        },
        resetChecked(children) {
            var me = this;
            each(children, function() {
                if (this.children && this.children.length) {
                    this.checked = false;
                    delete this.checked;
                    me.resetChecked(this.children);
                } else {
                    this.checked = me.selections.indexOf(this.id) > -1;
                }
            });
        },
        build(children, perms) {
            var me = this;
            each(perms, function() {
                var item = {
                    id: this.id,
                    title: this.name
                };
                if (this.children && this.children.length) {
                    item.children = [];
                    me.build(item.children, this.children);
                } else {
                    item.checked = false;
                }
                children.push(item);
            });
        }
    },
    mounted() {
        this.$http.post(URI_TREE, {
            id: this.params.id
        }).then((response) => {
            var res = response.data;
            if (res.success) {
                this.selections = res.data.perms;
                this.permstree = res.data.children;
            }
            this.build(this.data[0].children, this.permstree);
            this.reset();
            this.loading = false;
        });
    },
    components: {
        Layout,
        Content,
        Spin,
        Tree,
        Button
    }
}
</script>